<template>
    <div class="descriptionContainer">
        <img src="/src/assets/img/games/clans/leftBack02.webp" alt="">
        <div class="textDescription">
            <h1>LEAD YOUR CLAN TO VICTORY!</h1>
            <p>Answer the call of the mustache! Join the international fray that is Clash of Clans. Customize your
                village, build an army and crush your opponents. Like using friendship to strike fear into your enemies?
                Join a Clan, or establish a Clashing legacy by creating your own. The choice is yours in this
                millions-strong community of Barbarians. Download for free and Clash on, Chief!</p>
            <div class="app-downloads">
                <a href="https://itunes.apple.com/app/clash-of-clans/id529479190?mt=8" target="_blank"
                   class="app-store-link"><img
                    src="/src/assets/img/footer/appstore.webp" alt="App Store"></a>
                <a href="https://play.google.com/store/apps/details?id=com.supercell.clashofclans&referrer=mat_click_id%3Df6890da7bad79ed3290aa334b12d358d-20141216-1681"
                   target="_blank"
                   class="play-store-link"><img src="/src/assets/img/footer/googlestore.webp"
                                                alt="Google Play"></a>
                <a href="https://www.amazon.com/Supercell-ltd-Clash-of-Clans/dp/B07K7M5CMG/"
                   target="_blank"
                   class="play-store-link"><img src="/src/assets/img/common/amazonAppstore.webp"
                                                alt="Download Hay Day on Amazon appstore"></a>
            </div>
        </div>
    </div>
</template>

<script setup>

</script>

<style scoped>
.descriptionContainer {
    padding: 50px 0;
    display: flex;
}

.descriptionContainer img {
    width: 58%;
    margin-left: -16%;
}

.descriptionContainer .textDescription {
    width: 40%;
    margin: auto;
}

.textDescription h1 {
    font-size: 34px;
    font-weight: bold;
    margin: 23px 0;
}

.textDescription p {
    font-size: 18px;
    line-height: 1.5;
}

.app-downloads {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 23px;
}

.app-downloads a {
    margin-right: 20px;
}

.app-store-link img, .play-store-link img {
    height: 50px;
    width: auto;
    margin: 0;
    padding: 0;
}
</style>